<script setup lang="ts">


import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {router} from "../main.ts";
import {showToast} from "vant";


const user = ref(
    {
      userName: '',
      userAvatar: '',
      userPhone: '',
      userEmail: '',
      userProfile: '',
      gender: '',
      userLevel: ''
    }
);

onMounted(() => {
  myAxios.get('/user/search')
      .then(function (response) {
        // 处理成功情况
        console.log(response.data.data)
        user.value = response.data.data;
        console.log(user.value)
      })
      .catch(function (error) {
        // 处理错误情况
        console.error(error);

      })
})

const onClickLeft = () => {
  router.push('/user/edit');
}

const onSubmit = () => {
  // 发送请求更新用户信息
  myAxios.post('/user/edit', user.value)
     .then(function (response) {
        // 处理成功情况
        console.log(response.data)
       showToast('修改成功');

        router.push('/user/edit');
      })
     .catch(function (error) {
       console.error(error);
        // 处理错误情况
      });
};

const value = ref([
  { url: '' },
]);



const afterRead =(file:any) =>{
  // 此时可以自行将文件上传至服务器
  console.log(file)

  //发送请求能供后端MultipartFile file使用
  const formData = new FormData();
  formData.append('file', file.file);
  myAxios.post('/file/upload', formData, {
    headers: {
      'Content-Type':'multipart/form-data'
    }
  }).then(function (response) {
    // 处理成功情况
    console.log(response.data)
    user.value.userAvatar = response.data.data;
    console.log(user.value.userAvatar)
  }).catch(function (error) {
    // 处理错误情况
    console.error(error);
  });


  console.log(user.value.userAvatar)

  // 这里只是打印出文件大小
  console.log(file.size)

  // 这里只是打印出文件类型
  console.log(file.type)

}







</script>

<template>
  <van-nav-bar class="nav-bar"
               title="编辑用户信息"
  >

  </van-nav-bar>
  <img src="../assets/最终返回键.png" class="back-btn" alt="返回" @click="onClickLeft"/>
  <div class="back-image" />

  <van-form @submit="onSubmit">



    <van-field name="uploader"  label="头像上传">
      <template #input>
        <van-uploader :after-read="afterRead" v-model="value" multiple :max-count="1"  />
      </template>
    </van-field>


    <van-cell-group inset>
      <van-field
          v-model="user.userName"
          name="userName"
          label="用户名"
          placeholder="用户名"

      />

      <van-field name="gender" label="性别">
        <template #input>
          <van-radio-group v-model="user.gender" direction="horizontal">
            <van-radio name="男">男</van-radio>  &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-model="user.userPhone"
          name="userPhone"
          label="联系电话"
          placeholder="用户电话"

      />
      <van-field
          v-model="user.userEmail"
          name="userEmail"
          label="邮箱地址"
          placeholder="用户邮箱"
      />
      <van-field
        v-model="user.userProfile"
      name="userProfile"
        label="简介"
        placeholder="用户简介"

    />

    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" @click="onSubmit">
        提交
      </van-button>
    </div>
  </van-form>

</template>

<style scoped>
.back-image {
 background-image:url("../assets/用户修改背景.png");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.back-btn {
  position: absolute;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 1;
}

.nav-bar {
  position: relative;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}
</style>